import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_rating_bar/flutter_rating_bar.dart';

class CellContent extends StatefulWidget {
  const CellContent({Key? key}) : super(key: key);

  @override
  State<CellContent> createState() => _CellContentState();
}

class _CellContentState extends State<CellContent> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.teal,
      appBar: AppBar(
        title: Text('FoldingCell'),
      ),
      body: SingleChildScrollView(
        child: Container(
          padding: EdgeInsets.all(44),
          width: double.infinity,
          child: Column(
            mainAxisSize: MainAxisSize.max,
            children: [
              componentTitle('组件1'),
              component1(),
              componentTitle('组件2'),
              component2(),
              componentTitle('组件3'),
              component3(),
              componentTitle('组件4'),
              component4(),
              componentTitle('组件5'),
              component5(),
              componentTitle('组件6'),
              component6(),
            ],
          ),
        ),
      ),
    );
  }

  /// 组件标题
  Widget componentTitle(String title) {
    return Container(
      height: 34,
      padding: EdgeInsets.symmetric(vertical: 8.0),
      alignment: Alignment.bottomLeft,
      child: Text(
        title,
        style: TextStyle(
          color: Colors.white,
          fontSize: 14,
        ),
      ),
    );
  }

  /// 组件 1
  Widget component1() {
    double height = 165.0;
    return ClipRRect(
      borderRadius: BorderRadius.all(Radius.circular(8.0)),
      child: Container(
        height: height,
        child: Row(
          children: [
            Container(
              width: 88,
              color: HexColor.fromHex('5D4A99'),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  Text(
                    '\$25',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontSize: 24,
                      color: Colors.white,
                    ),
                  ),
                  Text.rich(TextSpan(style: TextStyle(), children: [
                    TextSpan(
                      text: 'TODAY\n',
                      style: TextStyle(
                        color: Colors.grey,
                        fontSize: 10,
                      ),
                    ),
                    TextSpan(
                      text: '06:30 PM',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 13,
                      ),
                    )
                  ]))
                ],
              ),
            ),
            Expanded(
              child: Container(
                height: double.infinity,
                color: Colors.white,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        SizedBox(width: 10),
                        Image.asset(
                          'assets/images/folding_cell/dots.png',
                          width: 16,
                          height: 42,
                        ),
                        SizedBox(
                          width: 6,
                        ),
                        Expanded(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              Text(
                                'W 90th St, New York , 10024',
                                style: TextStyle(
                                  fontWeight: FontWeight.w500,
                                  fontSize: 16,
                                ),
                              ),
                              Container(
                                margin: EdgeInsets.fromLTRB(0, 8, 10, 8),
                                width: double.infinity,
                                height: 0.5,
                                color: Colors.grey,
                              ),
                              Text(
                                '46th Ave, Woodside, 10011',
                                style: TextStyle(
                                  fontWeight: FontWeight.w500,
                                  fontSize: 16,
                                ),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: [
                        explainText('REQUEST', '6'),
                        explainText('PLEDGE', '\$150'),
                        explainText('WEIGHT', 'light'),
                      ],
                    ),
                  ],
                ),
              ),
            )
          ],
        ),
      ),
    );
  }

  /// 组件 2
  Widget component2() {
    return Container(
      child: Column(
        children: [
          Container(
            padding: EdgeInsets.symmetric(horizontal: 10),
            height: 44,
            color: HexColor.fromHex('5D4A99'),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Icon(
                  Icons.menu,
                  color: Colors.white,
                ),
                Text(
                  '# 2618-3157',
                  style: TextStyle(
                    fontSize: 16,
                    color: Colors.white,
                  ),
                ),
                Text(
                  '\$25',
                  style: TextStyle(
                    fontSize: 16,
                    color: Colors.white,
                  ),
                ),
              ],
            ),
          ),
          Stack(
            children: [
              Image.asset(
                'assets/images/folding_cell/image.png',
                width: double.infinity,
                height: 121,
                fit: BoxFit.cover,
              ),
              Positioned.fill(
                bottom: 12,
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  mainAxisSize: MainAxisSize.max,
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    explainText('REQUEST', '6', subtitleColor: Colors.white),
                    explainText('PLEDGE', '\$150', subtitleColor: Colors.white),
                    explainText('WEIGHT', 'light', subtitleColor: Colors.white),
                  ],
                ),
              )
            ],
          ),
        ],
      ),
    );
  }

  /// 组件 3
  Widget component3() {
    return Container(
      color: Colors.white,
      padding: EdgeInsets.fromLTRB(10, 10, 10, 0),
      child: Column(
        children: [
          Padding(
            padding: EdgeInsets.only(bottom: 6),
            child: Text(
              'SENDER',
              style: TextStyle(
                color: Colors.grey,
                fontSize: 12,
              ),
            ),
          ),
          Row(
            children: [
              ClipRRect(
                borderRadius: BorderRadius.circular(8.0),
                child: Image.asset(
                  'assets/images/folding_cell/avatar.png',
                  width: 48,
                  height: 48,
                ),
              ),
              SizedBox(
                width: 10,
              ),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    'Edward Norton',
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 16,
                      color: Colors.black87,
                    ),
                  ),
                  SizedBox(
                    height: 4,
                  ),
                  Row(
                    children: [
                      RatingBar.builder(
                        initialRating: 3,
                        minRating: 1,
                        itemSize: 14,
                        direction: Axis.horizontal,
                        allowHalfRating: true,
                        itemPadding: EdgeInsets.symmetric(horizontal: 0),
                        itemBuilder: (ctx, _) => Icon(
                          Icons.star,
                          color: Colors.amber,
                        ),
                        onRatingUpdate: (double value) {
                          if (kDebugMode) {
                            print(value);
                          }
                        },
                      ),
                      SizedBox(
                        width: 4,
                      ),
                      Text(
                        '(26)',
                        style: TextStyle(
                          color: Colors.grey,
                          fontSize: 12,
                        ),
                      ),
                    ],
                  ),
                ],
              ),
              Spacer(),
              Icon(
                Icons.arrow_forward_ios,
                size: 16,
                color: Colors.grey,
              ),
            ],
          ),
          Divider(
            color: Colors.grey[300],
          ),
        ],
      ),
    );
  }

  /// 组件 4
  Widget component4() {
    return Container(
      color: Colors.white,
      padding: EdgeInsets.all(10),
      child: Row(
        children: [
          Expanded(
              child: multipleLineText(
                  'FROM', 'W 90th St', 'New York, NY' '10025')),
          Expanded(
            child: multipleLineText('T0', '46th Ave', 'Woodside, NY 11101'),
          ),
          Icon(
            Icons.arrow_forward_ios,
            size: 16,
            color: Colors.grey,
          )
        ],
      ),
    );
  }

  /// 组件 5
  Widget component5() {
    return Container(
      color: Colors.white,
      padding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
      child: Row(
        children: [
          Expanded(
              child: multipleLineText(
                  'DELIVERY',
                  '06:30 pm',
                  'May 16, '
                      '2021')),
          Expanded(
            child: multipleLineText('REQUEST DEADLINE', '24 minutes', ''),
          ),
          Icon(
            Icons.arrow_forward_ios,
            size: 16,
            color: Colors.grey,
          )
        ],
      ),
    );
  }

  /// 组件 6
  Widget component6() {
    return ClipRRect(
      borderRadius: BorderRadius.vertical(bottom: Radius.circular(8)),
      child: Container(
        color: Colors.white,
        padding: EdgeInsets.all(10),
        child: Column(
          children: [
            ElevatedButton(
              style: ElevatedButton.styleFrom(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(12),
                ),
                elevation: 0,
                primary: HexColor.fromHex('FEBE16'),
              ),
              onPressed: () {},
              child: Container(
                height: 36,
                child: Center(
                  child: Text(
                    'SENDER REQUEST',
                    style: TextStyle(
                        fontSize: 15,
                        color: Colors.black87,
                        fontWeight: FontWeight.bold),
                  ),
                ),
              ),
            ),
            SizedBox(
              height: 4,
            ),
            Text(
              '5 people have sent a request',
              style: TextStyle(
                color: Colors.grey,
                fontSize: 12,
                fontWeight: FontWeight.w500,
              ),
            )
          ],
        ),
      ),
    );
  }

  /// 三行文字
  Widget multipleLineText(String line1, String line2, String line3) {
    return Text.rich(
      TextSpan(
        style: TextStyle(height: 1.4),
        children: [
          TextSpan(
            text: '$line1\n',
            style: TextStyle(
              color: Colors.grey,
              fontSize: 12,
            ),
          ),
          TextSpan(
            text: '$line2\n',
            style: TextStyle(
              color: Colors.black87,
              fontWeight: FontWeight.bold,
              fontSize: 14,
            ),
          ),
          TextSpan(
            text: line3,
            style: TextStyle(
              color: Colors.black87,
              fontSize: 12,
            ),
          ),
        ],
      ),
    );
  }

  ///
  Widget explainText(String title, String subtitle,
      {Color? titleColor, Color? subtitleColor}) {
    return Text.rich(
      TextSpan(
          style: TextStyle(
            height: 1.4,
          ),
          children: [
            TextSpan(
              text: '$title\n',
              style: TextStyle(
                color: titleColor ?? Colors.grey,
                fontSize: 13,
              ),
            ),
            TextSpan(
              text: subtitle,
              style: TextStyle(
                color: subtitleColor ?? Colors.blueGrey,
                fontWeight: FontWeight.bold,
                fontSize: 17,
              ),
            ),
          ]),
    );
  }
}

/// utils
extension HexColor on Color {
  /// String is in the format "aabbcc" or "ffaabbcc" with an optional leading "#".
  static Color fromHex(String hexString) {
    final buffer = StringBuffer();
    if (hexString.length == 6 || hexString.length == 7) buffer.write('ff');
    buffer.write(hexString.replaceFirst('#', ''));
    return Color(int.parse(buffer.toString(), radix: 16));
  }

  /// Prefixes a hash sign if [leadingHashSign] is set to `true` (default is `true`).
  String toHex({bool leadingHashSign = true}) => '${leadingHashSign ? '#' : ''}'
      '${alpha.toRadixString(16).padLeft(2, '0')}'
      '${red.toRadixString(16).padLeft(2, '0')}'
      '${green.toRadixString(16).padLeft(2, '0')}'
      '${blue.toRadixString(16).padLeft(2, '0')}';
}
